
<ion-header class="home-header" style="box-shadow: 2px 2px 2px #cccccc">
  <ion-navbar text-center style="background-color: white;padding: 0">
    <img src="../assets/imgs/navbar_logo@2x.png" alt="" style="width: 30%">
  </ion-navbar>
</ion-header>

<ion-content style="background-color: #F0F0F0;padding: 0;" text-center>
  <div>
    <ion-card class="setting-card" style="margin-top: 64px; height: 180px;">
      <ion-card-content >
        <div class="photo-div">
          <img src="../assets/imgs/zuohan.jpg"  class="photo">
        </div>
        <div style="margin-top: 54px;">
          <p style="font-size: 22px">左寒的家</p>
          <p style="font-size: 16px;color: gray">网关地址:192.168.5.22</p>
        </div>
      </ion-card-content>
    </ion-card>

    <ion-card class="setting-card" style="margin-top: 12px;height: 60px">
      <ion-card-content style="padding: 0 4%" >
        <p style="font-size: 18px;line-height: 60px;vertical-align:   middle;text-align: left">注册子账号 <span style="float: right"> > </span></p>
      </ion-card-content>
    </ion-card>

    <ion-card class="setting-card" style="margin-top: 12px;height: 280px">
      <ion-card-content style="padding: 0 4%;height: 100%" >
        <ion-grid>
          <ion-row>
            <ion-col col-6  style="height: 120px;position: relative">
              <img src="../assets/imgs/Setting_icon_safe@2x.png" alt="" class="setting-btn-img">
              <p class="setting-btn-text">安全</p>
            </ion-col>
            <ion-col col-6>
              <img src="../assets/imgs/Setting_icon_about@2x.png" alt="" class="setting-btn-img">
              <p class="setting-btn-text">关于</p>
            </ion-col>
          </ion-row>


          <ion-row >
            <ion-col col-6 style="height: 120px">
              <img src="../assets/imgs/Setting_icon_version@2x.png" alt="" class="setting-btn-img">
              <p class="setting-btn-text">消息</p>
            </ion-col>
            <ion-col col-6>
              <img src="../assets/imgs/Setting_icon_exit@2x.png" alt="" class="setting-btn-img">
              <p class="setting-btn-text">注销</p>
            </ion-col>
          </ion-row>

        </ion-grid>
      </ion-card-content>
    </ion-card>
  </div>
</ion-content>
<!--<ion-content padding>-->
  <!--<div class="set-flex-div">-->
    <!--<div style="flex: 2">-->
      <!--<img src="../../assets/imgs/mywife2.jpg" alt="">-->
    <!--</div>-->
    <!--<div style="flex: 3;padding-left: 16px; justify-content:center">-->
      <!--<p style="font-size: 24px;margin: 0">{{information[0]}}</p>-->
      <!--<p style="font-size: 24px">{{information[1]}}</p>-->
      <!--<p style="font-size: 16px">网关地址：{{information[4]}}</p>-->
    <!--</div>-->
  <!--</div>-->
  <!--<h2>基本信息</h2>-->
  <!--<br>-->
  <!--<ion-list >-->
    <!--<div style="display: flex;align-items: center;justify-content:center">-->
      <!--<div style="flex: 5">-->
        <!--<ion-item style="padding-left: 0">-->
          <!--<ion-label color="primary">用户昵称</ion-label>-->
          <!--<ion-input  [(ngModel)]="information[0]"  [disabled]="is_disabled[0]"></ion-input>-->
        <!--</ion-item>-->
      <!--</div>-->
      <!--<div style="flex: 1">-->
        <!--<button ion-button color="lightskyblue" class="edit-btn" (click)="edit_ifo(0)"><ion-icon name="brush" class="edit-icon"></ion-icon></button>-->
      <!--</div>-->
    <!--</div>-->

    <!--<div style="display: flex;align-items: center;justify-content:center">-->
      <!--<div style="flex: 5">-->
        <!--<ion-item style="padding-left: 0">-->
          <!--<ion-label color="primary">项目名称</ion-label>-->
          <!--<ion-input  [(ngModel)]="information[1]" [disabled]="is_disabled[1]" ></ion-input>-->
        <!--</ion-item>-->
      <!--</div>-->
      <!--<div style="flex: 1">-->
        <!--<button ion-button color="lightskyblue" class="edit-btn" (click)="edit_ifo(1)"><ion-icon name="brush" class="edit-icon"></ion-icon></button>-->
      <!--</div>-->
    <!--</div>-->

    <!--<div style="display: flex;align-items: center;justify-content:center">-->
      <!--<div style="flex: 5">-->
        <!--<ion-item style="padding-left: 0">-->
          <!--<ion-label color="primary">联系电话</ion-label>-->
          <!--<ion-input [(ngModel)]="information[2]" [disabled]="is_disabled[2]" ></ion-input>-->
        <!--</ion-item>-->
      <!--</div>-->
      <!--<div style="flex: 1">-->
        <!--<button ion-button color="lightskyblue" class="edit-btn"  (click)="edit_ifo(2)"><ion-icon name="brush" class="edit-icon"></ion-icon></button>-->
      <!--</div>-->
    <!--</div>-->

    <!--<div style="display: flex;align-items: center;justify-content:center">-->
      <!--<div style="flex: 5">-->
        <!--<ion-item style="padding-left: 0">-->
          <!--<ion-label color="primary">项目地址</ion-label>-->
          <!--<ion-input  [(ngModel)]="information[3]" [disabled]="is_disabled[3]" ></ion-input>-->
        <!--</ion-item>-->
      <!--</div>-->
      <!--<div style="flex: 1">-->
        <!--<button ion-button color="lightskyblue" class="edit-btn"  (click)="edit_ifo(3)"><ion-icon name="brush" class="edit-icon"></ion-icon></button>-->
      <!--</div>-->
    <!--</div>-->

    <!--<div style="display: flex;align-items: center;justify-content:center">-->
      <!--<div style="flex: 5">-->
        <!--<ion-item style="padding-left: 0">-->
          <!--<ion-label color="primary">网关地址</ion-label>-->
          <!--<ion-input [(ngModel)]="information[4]" [disabled]="is_disabled[4]" ></ion-input>-->
        <!--</ion-item>-->
      <!--</div>-->
      <!--<div style="flex: 1">-->
        <!--<button ion-button color="lightskyblue" class="edit-btn"  (click)="edit_ifo(4)"><ion-icon name="brush" class="edit-icon"></ion-icon></button>-->
      <!--</div>-->
    <!--</div>-->

    <!--<div style="display: flex;align-items: center;justify-content:center">-->
      <!--<div style="flex: 5">-->
        <!--<ion-item style="padding-left: 0">-->
          <!--<ion-label color="primary">邮箱设置</ion-label>-->
          <!--<ion-input  [(ngModel)]="information[5]" [disabled]="is_disabled[5]" ></ion-input>-->
        <!--</ion-item>-->
      <!--</div>-->
      <!--<div style="flex: 1">-->
        <!--<button ion-button color="lightskyblue" class="edit-btn"  (click)="edit_ifo(5)"><ion-icon name="brush" class="edit-icon"></ion-icon></button>-->
      <!--</div>-->
    <!--</div>-->


  <!--</ion-list>-->

  <!--<br>-->
  <!--<h2>账号与安全</h2>-->
  <!--<br>-->

  <!--<p (click)="goto_changephone()" class="set-option">修改注册手机</p>-->
  <!--<p (click)="goto_changepassword()" class="set-option">修改密码</p>-->
  <!--<p (click)="new_account()" class="set-option">新建子账号</p>-->
  <!--<p (click)="account_permission()" class="set-option">子账号权限设置</p>-->
  <!--<p (click)="goto_login()" class="set-option">注销登陆</p>-->


  <!--<br>-->
  <!--<h2>关于</h2>-->


  <!--<ion-item>-->
    <!--<ion-label>语言</ion-label>-->
    <!--<ion-select [(ngModel)]="language">-->
      <!--<ion-option value="c">中文</ion-option>-->
      <!--<ion-option value="e">English</ion-option>-->
    <!--</ion-select>-->
  <!--</ion-item>-->

  <!--&lt;!&ndash;<div style="display: flex;align-items: center;justify-content:center">&ndash;&gt;-->
  <!--&lt;!&ndash;<div style="flex: 5">&ndash;&gt;-->
  <!--&lt;!&ndash;<ion-item style="padding-left: 0">&ndash;&gt;-->
  <!--&lt;!&ndash;<ion-label color="primary">语言</ion-label>&ndash;&gt;-->
  <!--&lt;!&ndash;<ion-input  value="中文" readonly ></ion-input>&ndash;&gt;-->
  <!--&lt;!&ndash;</ion-item>&ndash;&gt;-->
  <!--&lt;!&ndash;</div>&ndash;&gt;-->
  <!--&lt;!&ndash;<div style="flex: 1">&ndash;&gt;-->
  <!--&lt;!&ndash;<button ion-button color="lightskyblue" class="edit-btn" ><ion-icon name="brush" class="edit-icon"></ion-icon></button>&ndash;&gt;-->
  <!--&lt;!&ndash;</div>&ndash;&gt;-->
  <!--&lt;!&ndash;</div>&ndash;&gt;-->

  <!--<div style="display: flex;align-items: center;justify-content:center">-->
    <!--<div style="flex: 5">-->
      <!--<ion-item style="padding-left: 0">-->
        <!--<ion-label >版本</ion-label>-->
        <!--&lt;!&ndash;<ion-input  value="0.0.1" readonly style="text-align: right">0.01</ion-input>&ndash;&gt;-->
      <!--</ion-item>-->
    <!--</div>-->
    <!--<div style="flex: 1">-->
      <!--<span style="text-align: right;font-size: 17px;">0.0.1</span>-->
    <!--</div>-->
  <!--</div>-->


  <!--&lt;!&ndash;<p class="set-option">语言</p>&ndash;&gt;-->
  <!--&lt;!&ndash;<p class="set-option">版本 <ion-toggle [(ngModel)]="language"></ion-toggle></p>&ndash;&gt;-->
  <!--<p class="set-option" (click)="about()">公司信息</p>-->
<!--</ion-content>-->
